<template>
	<view>
		<view>
			<view style="padding: 20rpx 40rpx;display: flex;justify-content: space-between;">
				<text :class="[{show : isactive1},{title : isactive2}]" @click="clickD"
					style="margin:20rpx;padding-bottom: 14rpx;">技能描述</text>
				<text :class="[{show : isactive2},{title : isactive1}]" @click="clickP"
					style="margin:20rpx;padding-bottom: 14rpx;">技能熟悉程度</text>
			</view>
			<view v-show="showD" style="margin-top:10rpx;border-top: 2rpx solid #333333;padding-top: 20rpx;">
				<view class="content">1. 熟练掌握前端最基本的html、css、js，负责网站页面设计、前端开发，以及动态效果的实现，根据项目需求开发项目前端页面，还原效果图</view>
				<view class="content">2. 熟练node的项目环境配置与运行搭建，解决搭建的问题并实现项目的运行；熟练vue项目的开发，对Element与vue router等vue的相关框架，以及查看后台接口文档，与后台的数据对接，页面交互</view>
				<view class="content">3. 精通uni-app的相关项目的开发与运行打包流程，
					熟悉多端编译与app打包，小程序的运行编译与发布，
					对DCloud公司下的uniCloud云开发模式也是有相关项目开发，
					使用uniCloud的前端网页托管功能与云数据库等相关功能
				</view>
				<view class="content">4. 运营个人的小程序与公众平台，一直都有小程序开发的项目经历与学习,
					工作期间也负责公司的开源项目每周一次的代码更新与维护
				</view>
				<view class="content">5. 熟练使用git bash与git客户端版本控制工具，
					node的项目环境配置与运行搭建，
					参与多个不同项目的前端开发工作，包括企业站、电商网站、个人博客、移动端网站等;
					并且能解决团队合作更新与提交的问题冲突，更好的协商合作
				</view>
				<view class="content">6. 熟练使用vs code编辑器开发，node的配置与项目搭建运行，结合gitLens插件实现git相关代码管理功能</view>
				<view class="content">7. uni-app的编辑器HBuilder的使用，前端idea WebStorm的使用</view>
				<view class="content">8. 运营的能力，公司的开源项目的gitHub库与gitee库，个人博客笔记类型的记录与小程序的运营，编写项目开发总结，把错误和解决方案写成文档</view>
				<view class="content">9. 理解bug问题所在，准确定位bug原因，并及时修改bug</view>
				<view class="content">10. 公司客戶群的前端顾问，参与讨论项目分工和编写工作计划，理解代码可维护性以及重视用户体验的重要性，能及时为客户解决项目上的问题</view>
			</view>
		</view>
		<view style="margin-top:10rpx;border-top: 2rpx solid #333333;padding-top: 20rpx;" v-show="showP">
			<view class="skill-item">
				<view class="contentC">
					uni-app
				</view>
				<view class="contentC">
					<progress percent="94"></progress>
				</view>
			</view>
			<view class="skill-item">
				<view class="contentC">
					JavaScript
				</view>
				<view class="contentC">
					<progress percent="70"></progress>
				</view>
			</view>
			<view class="skill-item">
				<view class="contentC">
					HTML
				</view>
				<view class="contentC">
					<progress percent="90"></progress>
				</view>
			</view>
			<view class="skill-item">
				<view class="contentC">
					CSS
				</view>
				<view class="contentC">
					<progress percent="90"></progress>
				</view>
			</view>
			<view class="skill-item">
				<view class="contentC">
					vue
				</view>
				<view class="contentC">
					<progress percent="85"></progress>
				</view>
			</view>
			<view class="skill-item">
				<view class="contentC">
					ES6+
				</view>
				<view class="contentC">
					<progress percent="60"></progress>
				</view>
			</view>
			<view class="skill-item">
				<view class="contentC">
					小程序
				</view>
				<view class="contentC">
					<progress percent="90"></progress>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showD: false,
				showP: false,
				isactive1: false,
				isactive2: false,
			}
		},
		onLoad() {
			this.clickD()
		},
		methods: {
			clickD() {
				this.showD = true
				this.showP = false
				this.isactive1 = true
				this.isactive2 = false
			},
			clickP() {
				this.showD = false
				this.showP = true
				this.isactive1 = false
				this.isactive2 = true
			}

		}
	}
</script>

<style>
	.skill-item {
		margin-top: 30rpx;
	}

	.contentC {
		margin-left: 15rpx;
		font-size: 34rpx;
		color: #8f8f94;
		margin-top: 20rpx;
	}

	.content {
		margin: 15rpx;
		font-size: 30rpx;
		color: #757579;
		padding-bottom: 14rpx;
		padding-left: 30rpx;
		text-indent: -30rpx;
	}

	.title {
		margin: 20rpx;
		font-size: 30rpx;
		color: #989898;
	}

	.show {
		border-bottom: 10rpx solid #2293cf;
		color: #2293cf;
		font-size: 34rpx;
		font-weight: bold;
	}
</style>
